<template>
  <el-dropdown trigger="click" @command="handleCommand">
    <div  class="size-icon--style">
      <svg-icon class-name="language-icon" icon-class="language" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="cn">中文 - 简体</el-dropdown-item>
        <el-dropdown-item command="tc">中文 - 繁體</el-dropdown-item>
        <el-dropdown-item command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useI18nStore } from '@/store/modules/i18n'
import i18n from '@/i18n'

const i18nStore = useI18nStore()
const currentLocale = computed(() => i18nStore.locale)

function handleCommand(command) {
  i18nStore.setLocale(command, i18n)
}
</script>


<style lang='scss' scoped>
.size-icon--style {
  font-size: 18px;
  line-height: 50px;
  padding-right: 7px;
}
</style>

